<template>
  <div class="resume-container">
    <el-card class="resume-section">
      <template #header>
        <div class="section-header">
          <h2>个人简历</h2>
        </div>
      </template>

      <BasicInfoCard :data="resumeData.basicInfo" />

      <el-divider />

      <WorkExperienceCard
          :experiences="resumeData.workExperiences"
          title="实习/工作经历"
      />

      <el-divider />

      <AwardsCard
          :awards="resumeData.awards"
          title="获奖经历"
      />

      <el-divider />

      <ResearchAchievementsCard
          :achievements="resumeData.researchAchievements"
          title="科研成果"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BasicInfoCard from './BasicInfoCard.vue'
import WorkExperienceCard from './WorkExperienceCard.vue'
import AwardsCard from './AwardsCard.vue'
import ResearchAchievementsCard from './ResearchAchievementsCard.vue'
import type Resume from "./cv";

// 这里应该是从API获取的数据
const resumeData = ref<Resume>({
  basicInfo: {
    name: '张三',
    gender: '男',
    birthDate: '1995-05-15',
    contact: '13800138000',
    email: 'zhangsan@example.com',
    education: '硕士',
    avatar: 'https://example.com/avatar.jpg'
  },
  workExperiences: [
    {
      company: 'ABC科技有限公司',
      position: '前端开发工程师',
      startDate: '2020-07',
      endDate: '2022-08',
      description: '负责公司官网和后台管理系统开发',
      certificate: 'https://example.com/cert1.pdf'
    }
  ],
  awards: [
    {
      name: '优秀毕业生',
      issuingOrg: '某某大学',
      date: '2019-06',
      description: '校级优秀毕业生称号',
      certificate: 'https://example.com/award1.pdf'
    }
  ],
  researchAchievements: [
    {
      type: 'SCI',
      title: '基于Vue3的前端架构研究',
      publishDate: '2021-03',
      description: '发表于《计算机科学》期刊',
      certificate: 'https://example.com/paper1.pdf'
    }
  ]
})
</script>

<style scoped>
.resume-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.resume-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>